<template>
	<view>
		<u-popup :show="popuo_show" round="20rpx" @close="onClose()" mode="bottom" bgColor="#ffffff">
			<view class="select-wrap">
				<view class="title-line">
					<text class="title">填写运单号</text>
					<image src="@/static/images/close.png" class="close-ioc" @click="onClose()"></image>
				</view>

				<view class="text-view">
					<text class="text-title">亲，麻烦把这些信息复制到小纸条上跟商品一并寄来，如没有这张小纸条，验货部门会拒收，请一定要跟商品寄来，谢谢配合。</text>
					<view class="text-col" @click="onCopyText()">
						<text class="text">小纸条填写的信息内容(点击可复制)：</text>
						<text class="text">1.订单编号：</text>
						<text class="text">2.手机号：</text>
						<text class="text">3.问题：（请详细描述一下问题，在某种情况下会出现问题。要写清楚 ，工程师会跟据您描述的问题进行检测，如检测不到问题。这边会原件发回，不再提醒。如需拍视频或照片。请写上去）</text>
						<text class="text">4.发回地址：（备注：原地址、新地址） </text>
						<text class="text">5.寄回时请写一张小纸条（姓名、电话、地址、问题）如没有，不利于工程师排查。请单独邮寄商品，配件一律不要寄回，如:盒子、保护套、数据线等，以免配件丢失！如出现丢失,责任自付。</text>
					</view>
				</view>
				<view class="form-view">


					<view class="line">
						<text class="label">物流公司</text>
						<view class="right">
							<view class="line-bg">
								<picker @change="onComChange" :range="com_list" range-key="name" class="picker-view">
									<view class="select-line">
										<input type="text" :value="com_name" placeholder="请选择物流公司" class="input" disabled />
										<image src="@/static/images/select.png" class="select-ioc"></image>
									</view>
								</picker>
							</view>

						</view>
					</view>
					<view class="line">
						<text class="label">运单号码</text>
						<view class="right">
							<view class="line-bg">
								<input type="text" v-model="value" placeholder="请输入运单号码" class="input" />
							</view>
						</view>
					</view>

				</view>

				<view class="btn-view">
					<button class="btn" @click="onAddAddress()">提 交</button>
				</view>
			</view>
			<i-toast ref="iToast"></i-toast>
			<u-toast ref="uToast"></u-toast>
		</u-popup>

	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: "order"
			}
		},
		data() {
			return {
				popuo_show: false,
				id: null,
				value: "",
				com_list: [],
				com_name: "",
				com_id: "",


			};
		},
		methods: {
			show(id) {
				this.id = id
				this.value = ""
				this.com_name = ""
				this.com_id = "1"
				this.popuo_show = true;
				this.getComceList() //获取快递公司列表
			},

			getComceList() {
				this.api.post("/api/work/shipperList").then(res => {
					this.com_list = res
				}).catch(err => {
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})

			},


			onComChange(e) {
				const active = this.com_list[e.detail.value]
				this.com_name = active.name
				this.com_id = active.id

			},
			onClose() {
				this.popuo_show = false;
				this.$emit("close");
			},

			async onAddAddress() {
				if (!this.com_id) return this.fail("请选择物流公司")
				if (!this.value) return this.fail("请输入运单号码")

				const tmplIds = [];
				tmplIds.push('co8fttwU1dCEjnQRDNAMKsxj9-fbxORBcL1dnEI-6FM') //确认收货
				tmplIds.push('UlSvrqNNJGoUeEvg-NM_sgXlEbp7ZtvQqO-MS26zltk') //后台确认完检测报告推送信息
				tmplIds.push('iYJS98tlU07sXKGpjPcMREuiLvNETw4QGaNbgB4bJrY') //后台发货提醒
				await this.requestSubscribeMessage(tmplIds)

				const params = {
					type: 1, //1上传物流单号 2上传费用凭证
					id: this.id,
					user_shipper_code: this.value, //快递单号
					user_shipper_id: this.com_id, //快递公司ID
				}
				this.api.post("/api/work/worUserShipper", { params: params }).then(res => {
					this.$refs.iToast.show("提交成功")
					setTimeout(() => {
						uni.$emit("order-get-data")
						this.onClose()
						if(this.type === 'detail'){
							this.goBack()
						}
					}, 800)
				}).catch(err => {
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})
			},
			onCopyText() {
				this.copy(`
				1.订单编号：
				2.手机号：
				3.问题：（请详细描述一下问题，在某种情况下会出现问题。要写清楚 ，工程师会跟据您描述的问题进行检测，如检测不到问题。这边会原件发回，不再提醒。如需拍视频或照片。请写上去）
				4.发回地址：（备注：原地址、新地址）
				
				`)
			},
			requestSubscribeMessage(tmplIds) {
				return new Promise((resolve, reject) => {

					uni.requestSubscribeMessage({
						tmplIds: tmplIds,
						complete: () => {
							resolve(true)
						}
					})
				})

			},

		},

	}
</script>

<style lang="scss" scoped>
	.select-wrap {
		display: flex;
		flex-direction: column;

		.title-line {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx;
			border-bottom: 1px solid #E5E5E5;

			.title {
				font-size: 32rpx;
				color: #333333;
			}

			.close-ioc {
				position: absolute;
				right: 30rpx;
				width: 26rpx;
				height: 26rpx;
			}
		}
	}

	.text-view {
		display: flex;
		flex-direction: column;
		padding: 30rpx 30rpx 0;

		.text-title {
			font-size: 24rpx;
			color: #000000;
		}

		.text-col {
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;

			.text {
				font-size: 24rpx;
				color: #333333;
				padding: 8rpx 0;
			}
		}
	}

	.form-view {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		padding: 0 30rpx 0rpx;
		margin-top: 10rpx;

		.line {
			display: flex;
			align-items: flex-start;
			margin-top: 26rpx;

			.label {
				line-height: 84rpx;
				font-size: 28rpx;
				color: #333333;
				width: 130rpx;
			}

			.right {
				display: flex;
				flex: 1;

				.line-bg {
					position: relative;
					flex: 1;
					display: flex;
					align-items: center;
					background: #FAFAFA;
					border-radius: 12rpx;
					margin-right: 16rpx;

					.input {
						height: 84rpx;
						padding-left: 26rpx;
						flex: 1;
					}

					.picker-view {
						flex: 1;
					}

					.select-line {
						display: flex;
						align-items: center;

						.select-ioc {
							width: 20rpx;
							height: 20rpx;
							margin-right: 16rpx;
						}
					}

					.textarea {
						padding: 28rpx;
						font-size: 28rpx;
						height: 180rpx;
					}
				}

				.line-bg:last-child {
					margin-right: 0;
				}
			}
		}

	}

	.btn-view {
		padding: 30rpx 30rpx;
	}
</style>